import { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { LOGIN_PATHNAME } from "../../router";
import { UserOutlined } from "@ant-design/icons";
import { Button, message } from "antd";
import { removeToken } from "../../utils/user-token";
import useGetUserInfo from "../../hooks/useGetUserInfo";
import { logoutReducer } from "../../store/userReducer";

const UserInfo: FC = () => {
  const nav = useNavigate();
  const dispatch = useDispatch();
  const { username, nickname } = useGetUserInfo();

  const logout = () => {
    dispatch(logoutReducer());
    removeToken();
    message.success("退出成功");
    nav(LOGIN_PATHNAME);
  };

  const UserInfo = (
    <>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={logout}>
        退出
      </Button>
    </>
  );

  const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;

  return <>{username ? UserInfo : Login}</>;
};

export default UserInfo;
